<template>
  <el-dialog :model-value="showEditQuestionDialog" title="编辑题目" width="800"
    style="height: 950px; overflow: hidden; overflow-y: auto" :close-on-click-modal="false" @close="handleCloseDialog">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基础信息" name="0"> </el-tab-pane>
      <el-tab-pane label="题目解析" name="1"> </el-tab-pane>
    </el-tabs>
    <el-form ref="formRef" :model="form" label-width="120px" style="padding-right: 100px">
      <el-form-item label="排序" prop="sort" v-if="activeName === '0'">
        <el-input v-model="form.sort" />
      </el-form-item>
      <!--      <el-form-item label="题目类型" v-if="activeName === '0'">-->
      <!--        <el-radio-group v-model="form.categoryId" :disabled="true">-->
      <!--          <el-radio value="1">科目一</el-radio>-->
      <!--          <el-radio value="4">科目四</el-radio>-->
      <!--          <el-radio value="5">注销恢复</el-radio>-->
      <!--          <el-radio value="6">满分学习</el-radio>-->
      <!--          <el-radio value="7">三力测试</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <el-form-item label="车型" prop="card_type" v-if="activeName === '0'">
        <el-checkbox-group v-model="cardvaluelist" :disabled="form.questionId != 0">
          <el-checkbox v-for="city in carList" :value="city.value" :key="city.value">
            {{ city.label }}({{ city.tag }})
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="题目名称" prop="name" v-if="activeName === '0'">
        <el-input type="textarea" :rows="4" v-model="form.questionName" :disabled="form.questionId != 0" />
      </el-form-item>
      <el-form-item label="题目类型" prop="cont_type" v-if="activeName === '0'">
        <el-radio-group v-model="form.questionType" :disabled="form.questionId != 0">
          <el-radio :value="2">判断题</el-radio>
          <el-radio :value="1">单选题</el-radio>
          <el-radio :value="0" v-if="form.categoryId !== '1'">多选题</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="contlist_list" v-if="form.questionType != 2 && activeName === '0'">
        <el-form-item label="选项A："><el-input class="contliststyle" v-model="form.questionA"
            :disabled="form.questionId != 0" /></el-form-item>
        <el-form-item label="选项B："><el-input class="contliststyle" v-model="form.questionB"
            :disabled="form.questionId != 0" /></el-form-item>
        <el-form-item label="选项C："><el-input class="contliststyle" v-model="form.questionC"
            :disabled="form.questionId != 0" /></el-form-item>
        <el-form-item label="选项D："><el-input class="contliststyle" v-model="form.questionD"
            :disabled="form.questionId != 0" /></el-form-item>
      </div>
      <!-- 单选题 -->
      <!-- 判断题 -->
      <div class="contlist_list" v-if="form.questionType == 2 && activeName === '0'">
        <el-form-item label="选项A："><el-input class="contliststyle" v-model="form.questionA"
            :disabled="form.questionId != 0" /></el-form-item>
        <el-form-item label="选项B："><el-input class="contliststyle" v-model="form.questionB"
            :disabled="form.questionId != 0" /></el-form-item>
      </div>
      <!-- end判断题 -->
      <el-form-item label="正确答案" prop="answer" v-if="form.questionType == 2 && activeName === '0'">
        <el-radio-group v-model="form.answer" :disabled="form.questionId != 0">
          <el-radio value="A">A</el-radio>
          <el-radio value="B">B</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="正确答案" prop="answer" v-if="form.questionType == 1 && activeName === '0'">
        <el-radio-group v-model="form.answer" :disabled="form.questionId != 0">
          <el-radio value="A">A</el-radio>
          <el-radio value="B">B</el-radio>
          <el-radio value="C">C</el-radio>
          <el-radio value="D">D</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="正确答案" prop="answer" v-if="form.questionType == 0 && activeName === '0'">
        <el-checkbox-group v-model="checkboxAnswer" :disabled="form.questionId != 0">
          <el-checkbox value="A">A</el-checkbox>
          <el-checkbox value="B">B</el-checkbox>
          <el-checkbox value="C">C</el-checkbox>
          <el-checkbox value="D">D</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="图片" prop="name" v-if="activeName === '0'">
        <div class="avatar-uploader" style="
            border: 1px dashed var(--el-border-color-darker);
            border-radius: 6px;
            overflow: hidden;
          " @click="showImageChooseDialog = true">
          <el-image v-if="form.questionImg" :src="form.questionImg" class="avatar" fit="contain"></el-image>
          <div v-if="form.questionImg" class="mask">替换</div>
          <el-icon v-if="form.questionImg" class="del-image" :size="20" @click.stop="handleDelImg">
            <CircleCloseFilled />
          </el-icon>
          <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
              <Plus />
            </el-icon></i>
        </div>
      </el-form-item>
      <el-form-item label="题目解析" prop="analysis" v-if="activeName === '1'">
        <el-input type="textarea" :rows="6" v-model="form.questionAnalysis" :disabled="true" />
      </el-form-item>
      <el-form-item label="速学速记" prop="fastStudy" v-if="activeName === '1'">
        <el-input type="textarea" :rows="6" v-model="form.fastStudy" />
      </el-form-item>
      <el-form-item label="视频讲解" prop="video" v-if="activeName === '1'">
        <el-input v-model="form.videoUrl">
          <template #append>
            <div class="video-uploader" @click="showVideoChooseDialog = true">
              <el-button style="color: #2b8dfa" type="primary">选择视频</el-button>
            </div>
          </template>
        </el-input>
        <!-- 上传视频部分 -->
        <div style="clear: both"></div>
        <video v-if="form.videoUrl" :src="form.videoUrl" controls class="video-preview"></video>
        <!-- 上传视频部分 -->
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit(formRef)">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
    :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
    :operationType="false"></image-selected-dialog>
  <video-group-dialog v-if="showVideoChooseDialog" :show-video-choose-dialog="showVideoChooseDialog"
    :single-type="singleType" :operation-type="false" @close-dialog="handleCloseVideoDialog" />
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { getcarmodellist, putquestioncategory } from '@/api/questionbank'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
import VideoGroupDialog from '@/views/decoration/diyComponents/VideoGroupDialog.vue'

const carList = ref([{ label: '', tag: '', value: '' }])
const cardvaluelist = ref()

const emit = defineEmits(['closeDialog'])

const props = defineProps({
  showEditQuestionDialog: {
    type: Boolean,
    default: false
  },
  editInfo: {
    type: Object
  },
  groupId: {
    type: [String, Number],
    default: ''
  }
})

console.log(props.groupId, "props.groupId===");


const activeName = ref<string>('0')
const submitLoading = ref(false)
const formRef = ref<FormInstance>()
const checkboxAnswer = ref([])

const form = reactive({
  id: '',
  questionName: '',
  des: '',
  sort: '1  ',
  questionA: '',
  questionB: '',
  questionC: '',
  questionD: '',
  answer: '',
  questionAnalysis: '',
  fastStudy: '',
  carIds: '',
  categoryId: '1',
  questionId: 0,
  questionType: 0,
  questionImg: '',
  videoUrl: ''
})

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  putupdateinfo(form.id)
}

//车型下拉接口
const getcarmodellistinfo = async () => {
  let obj = {}
  const res = await getcarmodellist.getcarmodelId(obj)
  if (res.code == 0) {
    carList.value = res.data
  }
}

async function putupdateinfo(id: string) {
  try {
    submitLoading.value = true
    let obj = {
      questionName: form.questionName,
      sort: form.sort,
      questionImg: form.questionImg,
      questionType: form.questionType,
      questionA: form.questionA,
      questionB: form.questionB,
      questionC: form.questionC,
      questionD: form.questionD,
      answer: form.answer,
      questionAnalysis: form.questionAnalysis,
      fastStudy: form.fastStudy,
      videoUrl: form.videoUrl,
      carIds: form.carIds,
      categoryId: form.categoryId,
      groupId: String(props.groupId || '')
    }
    if (form.questionType == 2) {
      obj.questionC = ''
      obj.questionD = ''
    }

    const res = await putquestioncategory.putquestioncategoryId(id, obj)
    if (res.code == '00000') {
      ElMessage.success('更新成功')
      emit('closeDialog', true)
    }
  } catch (e) {
  } finally {
    submitLoading.value = false
  }
}

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const singleType = ref(true)
const showVideoChooseDialog = ref(false)

const handleDelImg = () => {
  form.questionImg = ''
}

const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) {
    form.questionImg = value.fileUrl
  }
  showImageChooseDialog.value = false
}

const handleCloseVideoDialog = (value: any) => {
  if (value && value.fileUrl) {
    form.videoUrl = value.fileUrl
  }
  showVideoChooseDialog.value = false
}

function handleCloseDialog() {
  emit('closeDialog')
}

onMounted(() => {
  getcarmodellistinfo()

  if (props.editInfo) {
    form.id = props.editInfo.id
    form.questionName = props.editInfo.questionName
    form.des = props.editInfo.des
    form.sort = props.editInfo.sort
    form.questionA = props.editInfo.questionA
    form.questionB = props.editInfo.questionB
    form.questionC = props.editInfo.questionC
    form.questionD = props.editInfo.questionD
    form.answer = props.editInfo.answer
    form.questionAnalysis = props.editInfo.questionAnalysis
    form.fastStudy = props.editInfo.fastStudy
    form.categoryId = props.editInfo.categoryId
    form.carIds = props.editInfo.carIds
    form.questionId = props.editInfo.questionId
    form.questionType = props.editInfo.questionType
    form.questionImg = props.editInfo.questionImg
    form.videoUrl = props.editInfo.videoUrl
    checkboxAnswer.value = props.editInfo.answer.split('')
    cardvaluelist.value = props.editInfo.carIds.split(',')
  }
})
</script>

<style lang="scss" scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 12px;
  }

  .del-image {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #8c939d;
  }

  &:hover .mask {
    opacity: 1;
  }

  &:hover .del-image {
    display: block;
  }
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  max-width: 178px;
}

.video-uploader {
  border-radius: 6px;
  color: #fff;
  display: block;
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.video-preview {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}

.video-preview-border {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}
</style>
